<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        ul {
            margin: 0;
            padding: 0;
        }

        #app {
            margin: 0 auto;
            width: 700px;
        }

        ul {
            list-style: none;
        }

        span {
            width: 150px;
            display: inline-block;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>水果列表清单</h1>
        <ul>
            <li>
                <span>名称</span>
                <span>数量</span>
                <span>单价</span>
                <span>操作</span>
            </li>
            <li v-for="(item,index) in fruits" :key="index">
                <span>{{item.fruitName}}</span>
                <span>{{item.fruitQuantity}}</span>
                <span>{{item.fruitPrice}}</span>
                <span>
                    <button @click="del(index)">删除</button>
                    <button @click="update(index)">修改</button>
                </span>
            </li>
        </ul>
        总计：{{total}}
        <p>水果名称：<input type="text" v-model="fruit.fruitName"></p>
        <p>水果数量：<input type="text" v-model="fruit.fruitQuantity"></p>
        <p>水果单价：<input type="text" v-model="fruit.fruitPrice"></p>
        <button @click="add">添加</button>
    </div>
</body>

</html>
<script>
    var fruits = [
        {
            fruitName: '苹果',
            fruitQuantity: 30,
            fruitPrice: 3.8
        },
        {
            fruitName: '西瓜',
            fruitQuantity: 240,
            fruitPrice: 1.8
        },
        {
            fruitName: '芒果',
            fruitQuantity: 60,
            fruitPrice: 7.8
        }
    ]    
</script>
new Vua({
    ei:'#app',
    data(){
        return{
            fruits,
            fruit:{
                fruitName:'',
                fruitQuantity:'',
                fruitPrice:''
            },
            insertFlag: -1,
            buttonValue:'添加水果'
        }
    },
    methods:{
        add: function(){
            var reg=/^\d+$/ 
            var reg2=/^\d+(.\d{1,2})?$/
            if(!this.fruit.fruitName || !this.fruit.fruitQuantity || !this.fruit.fruitPrice){
              alert("水果数量不能为空！")
                return false  
            }
        }
    }
})